<template>
  <div>
    <!-- Banner -->
     <!-- Banner -->
    <div class="banner">
      <div class="center">
        <div>
          <img src="../../assets/icon/banner4.jpg" alt="">
        </div>
        <ul >
          <li class="fenlei" v-for="item in serveTypes" :key="item.clid">{{item.busclass}}
            <ul class="xifenlei">
              <li v-for="a in item.redetalis" :key="a.scid" @click="jump(item.busclass,a.vwork)" >{{a.vwork}}</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- 引入子组件 -->
    <syjtbj v-for="item in serveYw" :key="item.clid" :rede='item'>{{item.busclass}}</syjtbj>
  </div>
</template>

<script setup lang="ts">
import syjtbj from '@/components/Syjtbj.vue';
import { reactive } from 'vue';
import httpApi from '@/http'
import serveYws from '@/types/serveYm'
import { useRouter } from 'vue-router';
interface ServeType{
  clid:number,
  busclass:string,
  avatar:never,
  redetalis:[]
}
interface Redetalis{
  scid:number,
  vwork:string,
  scla_img:never,
  cid:number
}

const serveTypes = reactive<serveYws[]>([])
const redetalis = reactive<Redetalis[]>([])
httpApi.serveApi.queryAllserve().then(res=>{
  // console.log(res);
  serveTypes.push(...res.data.data)
})

const serveYw = reactive<serveYws[]>([])
httpApi.serveApi.queryserveByyW() .then((result) => {
  console.log(result);
  let res = result.data.data
  serveYw .push(res[0],res[1],res[2],res[3],res[5],res[6])
})

function jump(a:string,b:string){
  useRouter().push({
    name:'serve',
    query:{
      busclass:a,
      vwork:b
    }
  })
}

</script>

<style scoped lang="scss">
.banner {
  color: #fff;

  div {
    width: 1200px;
    overflow: hidden;
    position: relative;

    img {
      display: block;
      margin-left: -600px;
	  height: 360px;
    }
  }

  ul {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 0;
    top: 0;
    background-color: #9E2930;

    .fenlei {
      padding: 10px 30px;
      width: 130px;
      background-image: url(../../assets/icon/right.png);
      background-repeat: no-repeat;
      background-position: 155px 10px;

      &:hover {
        background-color: #8C181F;
        background-image: url(../../assets/icon/icon1.png);
        background-repeat: no-repeat;
        background-position: 174px 2px;

        >.xifenlei {
          display: block;
        }
      }

      .xifenlei {
        display: none;
        height: 360px;
        position: absolute;
        left: 180px;
        top: 0;
        text-align: center;
        flex-direction: column;
        justify-content: start;
        background-color: #8C181F;

        li {
          padding: 12px 0;
          width: 165px;

          &:hover {
            background-color: #F10E11;
          }
        }
      }
    }
  }
}
</style>